<template>
  <!-- 首页热门推荐 -- 推荐部分 -->
  <div class="hot-reco">
      <!-- 导航 -->
      <div class="nav">
          <div class="nav-left">
              <div class="bg">
                  <a href="javascript:;">热门推荐</a>
              </div>
              <div>
                  <a href="javascript:;" @click="toPlaylist('华语')">华语</a>
                  <span>|</span>
              </div>
              <div>
                  <a href="javascript:;">流行</a>
                  <span>|</span>
              </div>
              <div>
                  <a href="javascript:;">摇滚</a>
                  <span>|</span>
              </div>
              <div>
                  <a href="javascript:;">民谣</a>
                  <span>|</span>
              </div>
              <div>
                  <a href="javascript:;">电子</a>
              </div>
          </div>
          <div class="nav-right">
              <a href="javascript:;">更多</a>
              <i></i>
          </div>
      </div>
      <!-- 内容 -->
      <div class="content">
          <div class="content-item" v-for="item,index in 8" :key="index">
              <img src="./img/1.jpg">
              <!-- 图片的蒙版 -->
              <a class="mask" href="jacascript:;" title="天气好的话，把耳机分给我一半吧"></a>
              <div class="icon">
                  <span></span>
                  <span>66万</span>
                  <a href="javascrpt:;"></a>
              </div>
              <p>天气好的话，把耳机分给我一半吧</p>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'hot-recommend',
    methods:{
        // 跳转歌单页面
        toPlaylist(keyword){
            this.$router.push({
                path:'/find-music/playlist',
                query:{keyword}
            })
        }
    }
}
</script>

<style scoped lang="scss">
    .hot-reco{
        width: 730px;
        box-sizing: border-box;
        padding: 15px;
        // 导航
        .nav{
            width: 100%;
            height: 35px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            line-height: 35px;
            border-bottom: 2px solid #C10D0C;
            margin-bottom: 13px;
            a:hover{
                text-decoration: underline !important;
            }
            .bg a:hover{
                text-decoration: none !important;
            }
            .nav-left{
                display: flex;
                .bg{
                    background: url('@/assets/index.png') no-repeat;
                    background-position: -220px -154px;
                    padding: 0 10px 0 34px;
                    font-size: 20px;
                    a{
                        color: #333;
                        margin:0 15px 0 10px;
                    }
                }
                a{
                    text-decoration: none;
                    color: #666;
                }
                span{
                    margin: 0 10px;
                    color: #ccc;
                }
            }
            .nav-right{
                line-height: 35px;
                a{
                    text-decoration: none;
                    color: #666;
                }
                i{
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    background: url('@/assets/index.png') no-repeat;
                    background-position: 0 -239px;
                    margin:0 10px 0 5px;
                }
            }
        }
        // 内容
        .content{
            // width: 100%;
            width: 699px;
            height: 450px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            // display: grid;
            // grid-template-columns: repeat(4,1fr);
            // justify-items: center;
            .content-item{
                width: 140px;
                height: 204px;
                position: relative;
                margin-top: 5px;
                img{
                    width: 100%;
                    height: 140px;
                }
                .mask{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 140px;
                    height: 140px;
                    z-index: 0;
                    background: url('@/assets/coverall.png') no-repeat;
                    background-position: 0 0;
                }
                .icon{
                    position: absolute;
                    top: 113px;
                    left: 0;
                    z-index: 1;
                    width: 100%;
                    height: 27px;
                    line-height: 27px;
                    color: #ccc;
                    font-size: 12px;
                    background: url('@/assets/coverall.png') no-repeat;
                    background-position: 0 -537px;
                    span{
                        float: left;
                    }
                    span:nth-child(1){
                        width: 14px;
                        height: 11px;
                        background: url('@/assets/iconall.png') no-repeat;
                        background-position: 0 -24px;
                        margin: 8px 7px 0 10px;
                    }
                    a{
                        float: right;
                        width: 16px;
                        height: 17px;
                        background: url('@/assets/iconall.png') no-repeat;
                        background-position: 0 0;
                        margin: 5px 10px 0 0;
                        &:hover{
                            background-position: 0 -60px;
                        }
                    }
                }
                p{
                    font-size: 14px;
                    margin-top: 5px;
                    line-height: 24px;
                    width: 100%;
                    height: 24px;
                    color: #333;
                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
</style>